<template>
  <div class="windowss_edit">
    <titleDiv
        :title="title"
        :isShow="true"
        text1="创建人："
        text2="创建时间："
        :value1="listItem.founder"
        :value2="listItem.createtime"
      ></titleDiv>
    <div class="main">
    <el-form ref="form" :model="form" label-width="150px">
      <el-form-item label="窗口名称：">
        <el-input v-model="listItem.windowName" placeholder="如：个人工商局商户业务" value="listItem.windowName"></el-input>
      </el-form-item>
      <el-form-item label="业务类型：">
         <div class="equipment" v-if="businessShow ==  '1'">
            <div style="width: 80%;display:inline-block;">{{listItem.businessName}}</div>
            <el-button style="width: 19%" :plain="true" @click="buinessJiebang(listItem.businessTypeId,listItem.windowId)"> 解绑</el-button>
        </div>
        <div class="equipment" v-if="businessShow ==  '2'">
            <div style="width: 80%;display:inline-block;">该业务已解绑</div>
            <el-button style="width: 19%" :plain="true" @click="buinessChoose()">重新选择</el-button>
        </div>
        <el-select  v-if="businessShow == '3'" v-model="listItem.businessName" style="width: 100%" placeholder="业务类型选择" @change="getBussinessId($event)">
          <el-option v-for="(item,i) in bussiness" :key="i" :label="item.businessName" :value="item.id"   ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工作人员（选填）：">
        <el-input v-model="listItem.worker" placeholder="窗口工作人员姓名"></el-input>
      </el-form-item>
      <el-form-item label="联系方式（选填）：">
        <el-input v-model="listItem.iphone" placeholder="窗口工作人员联系方式"></el-input>
      </el-form-item>

      <el-form-item label="设备添加（选填）：">

        <div class="equipment" v-if="hjqisShow == '1'">
            <div style="width: 80%;display:inline-block;">{{form.hjq ? form.hjq.name : ''}}</div>
            <el-button style="width: 19%" :plain="true" @click="device(form.hjq.type,form.hjq.uniqueldentifier,1)"> 解绑</el-button>
        </div>
         <div class="equipment" v-if="hjqisShow ==  '2'">
            <div style="width: 80%;display:inline-block;">该设备已解绑</div>
            <el-button style="width: 19%" :plain="true" @click="deviceChoose(1)">重新选择</el-button>
        </div>

        <div  class="equipment" v-if="hjqisShow ==  '3'" >
            <el-select class="equipment"  v-model="form.hjqOne" style="width: 100%" placeholder="呼叫器选择" >
              <el-option v-for="(item,i) in hjq" :key="i" :label="item.name" :value="item.uniqueldentifier"   ></el-option>
            </el-select>
        </div>
       

        <div class="equipment" v-if="pjqisShow == '1'">
            <div style="width: 80%;display:inline-block;">{{form.pjq ? form.pjq.name:''}}</div>
            <el-button style="width: 19%" :plain="true"  @click="device(form.pjq.type,form.pjq.uniqueldentifier,2)"> 解绑</el-button>
        </div>

        <div class="equipment" v-if="pjqisShow ==  '2'">
            <div style="width: 80%;display:inline-block;">该设备已解绑</div>
            <el-button style="width: 19%" :plain="true" @click="deviceChoose(2)">重新选择</el-button>
        </div>

        <div  class="equipment"  v-if="pjqisShow ==  '3'" >
            <el-select class="equipment"  v-model="form.pjqOne" style="width: 100%" placeholder="评价器选择" >
              <el-option v-for="(item,i) in pjq" :key="i" :label="item.name" :value="item.uniqueldentifier"></el-option> 
            </el-select>
        </div>

        <div class="equipment" v-if="qhjisShow == '1'">
          <div style="width: 80%;display:inline-block;">{{form.qhj ? form.qhj.name : '' }}</div>
          <el-button style="width: 19%" :plain="true"  @click="device(form.qhj.type,form.qhj.uniqueldentifier,3)"> 解绑</el-button>
        </div>
        <div class="equipment" v-if="qhjisShow ==  '2'">
            <div style="width: 80%;display:inline-block;">该设备已解绑</div>
            <el-button style="width: 19%" :plain="true" @click="deviceChoose(3)">重新选择</el-button>
        </div>
        <div  class="equipment" v-if="qhjisShow ==  '3'" >
          <el-select class="equipment" v-model="form.qhjOne" style="width: 100%" placeholder="取号器选择" >
            <el-option v-for="(item,i) in qhj" :key="i" :label="item.name" :value="item.uniqueldentifier"   ></el-option>
          </el-select>  
        </div>

        <div class="equipment" v-if="dpisShow == '1'">
          <div style="width: 80%;display:inline-block;">{{form.dp.name}}</div>
          <el-button style="width: 19%" :plain="true"  @click="device(form.dp.type,form.dp.uniqueldentifier,4)"> 解绑</el-button>
        </div>
        <div class="equipment" v-if="dpisShow ==  '2'">
            <div style="width: 80%;display:inline-block;">该设备已解绑</div>
            <el-button style="width: 19%" :plain="true" @click="deviceChoose(4)">重新选择</el-button>
        </div>
        <div  class="equipment" v-if="dpisShow ==  '3'" >
          <el-select class="equipment" v-model="form.dpOne" style="width: 100%" placeholder="电视机大屏选择" >          
            <el-option v-for="(item,i) in dp" :key="i" :label="item.name" :value="item.uniqueldentifier"   ></el-option>           
          </el-select>
        </div>   

        <div class="equipment" v-if="ledisShow == '1'">
            <div style="width: 80%;display:inline-block;">{{form.led.name}}</div>
            <el-button style="width: 19%"  :plain="true"  @click="device(form.led.type,form.led.uniqueldentifier,5)"> 解绑</el-button>
        </div>
        <div class="equipment" v-if="ledisShow ==  '2'">
            <div style="width: 80%;display:inline-block;">该设备已解绑</div>
            <el-button style="width: 19%" :plain="true" @click="deviceChoose(5)">重新选择</el-button>
        </div>
        <div  class="equipment" v-if="ledisShow ==  '3'" >
           <el-select v-model="form.ledOne" style="width: 100%" placeholder="LED选择"  >   
            <el-option v-for="(item,i) in led" :key="i" :label="item.name" :value="item.uniqueldentifier"   ></el-option>          
          </el-select>
        </div>
        
      </el-form-item>

      <el-form-item label="备注（选填）：">
        <el-input type="textarea" resize="none" rows="5" placeholder="业务描述，子业务类型以及办理业务所需材料。" v-model="listItem.remarks"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="subbtn" @click="btn()" type="primary"  :plain="true">提交</el-button>
      </el-form-item>
    </el-form>
    </div>
  </div>
</template>
<script>
import titleDiv from './view/titleDiv.vue'
import {
  windowBusinessBunding,
  windowMessageChech,
  windowMessageEdit,
  windowShebeiMess,
  windowEquipmentBinding
} from "../api/getData";

export default {
  name: "windowss_edit",
  data: function() {
    return {
      title:"窗口详情",
      form: {},
      listItem: "",
      bussiness: "",
      bussinessid: "",
      hjq: "",
      hjqisShow: "3",
      dcs: true,
      pjq: "",
      pjqisShow: "3",
      qhj: "",
      qhjisShow: "3",
      led: "",
      ledisShow: "3",
      dp: "",
      dpisShow: "3",
      businessShow:'3',
      businessJiebang:[],
      equipmentJiebang:[],
      latticeid:''
    };
  },
  components:{
      titleDiv
    },
  created: function() {}, // 创建时
  beforeMount: function() {}, // 挂载之前
  mounted: function() {
    this.latticeid = JSON.parse(window.sessionStorage.getItem("latticeid"));
    windowMessageChech({ id: this.$route.query.id }).then(data => {
      this.listItem = data.data.data;
      if(data.data.data.businessName){
            this.businessShow = '1'
      }
      for (let i = 0; i < data.data.data.equipment.length; i++) {
        console.log(data.data.data.equipment, "类型");
        if (data.data.data.equipment[i].type == "hjq") {
          this.form.hjq = data.data.data.equipment[i];
          this.hjqisShow = '1';
        }
        if (data.data.data.equipment[i].type == "pjq") {
          this.form.pjq = data.data.data.equipment[i];
          this.pjqisShow = '1';
        }
        if (data.data.data.equipment[i].type == "qhj") {
          this.form.qhj = data.data.data.equipment[i];
          this.qhjisShow = '1';
        }
        if (data.data.data.equipment[i].type == "led") {
          this.form.led = data.data.data.equipment[i];
          this.ledisShow = '1';
        }
        if (data.data.data.equipment[i].type == "dp") {
          this.form.dp = data.data.data.equipment[i];
          this.dpisShow = '1';
        }
      }
    });
    windowShebeiMess({}).then(data => {
      this.bussiness = data.data.data.businessType;
      this.hjq = data.data.data.hjq;
      this.pjq = data.data.data.pjq;
      this.qhj = data.data.data.qhj;
      this.led = data.data.data.led;
      this.dp = data.data.data.dp;
    });
  }, // 挂载之后
  beforeUpdate: function() {}, // 数据更新时调用,在渲染之前
  updated: function() {}, // 数据更新后,渲染后调用(禁止)
  beforeDestroy: function() {}, // 实例销毁前调用,解绑中间层的数据传输
  destroyed: function() {}, // 实例销毁后调用
  methods: {
    getBussinessId(event) {
      this.bussinessid = event;
    },
    //解绑业务类型
    buinessJiebang(lat,win){
        this.businessShow = '2',
        this.businessJiebang.push(lat,win)
        this.bussinessid = ""
        console.log(this.businessJiebang,'ssss')
    },
    //业务类型重新选择
    buinessChoose(){
        this.businessShow = '3'
    },
    btn() {
      if(this.businessShow =='2'){
        windowBusinessBunding({"businessId":this.businessJiebang[0] , "windowId":this.businessJiebang[1]}).then((data) => {

        })
      }
      windowEquipmentBinding(this.equipmentJiebang).then(data => {});
        windowMessageEdit({
              iphone: this.listItem.iphone || "",
              windowName: this.listItem.windowName || "",
              remarks: this.listItem.remarks || "",
              worker: this.listItem.worker || "",
              id: this.listItem.id || "",
              businessTypeId: this.bussinessid ,
              windowId: this.$route.query.id,
              led: this.form.ledOne || "",
              hjq: this.form.hjqOne || "",
              dp: this.form.dpOne || "",
              pjq: this.form.pjqOne || "",
              qhj: this.form.qhjOne || ""
            }).then(data => {
              if (data.data.code == 0) {
                this.$message({
                  showClose: true,
                  message: data.data.msg,
                  type: "success"
                });
              }
              if (data.data.code == 1) {
                this.$message.error(data.data.msg);
              }
              var _this = this;
              setTimeout(function() {
                _this.$router.push({ path: "/windowss/windowssindex" });
              }, 500);
            });
      
    },
    //解绑设备
    device(type, id, i) {
         this.equipmentJiebang.push({'windowId':this.$route.query.id,"type":type,"equipmentUnique":id})
          windowShebeiMess({}).then(data => {
            if(data.data.code == 0){
                // this.bussiness = data.data.data.businessType;
                this.hjq = data.data.data.hjq ||[];
                this.pjq = data.data.data.pjq || [];
                this.qhj = data.data.data.qhj || [];
                this.led = data.data.data.led || [];
                this.dp = data.data.data.dp || [];
                switch (i) {
                  case 1:
                    this.hjqisShow = '2';
                    this.hjq.push({'name':this.form.hjq.name,"type":type,"uniqueldentifier":id})
                     console.log(typeof this.hjq,this.hjq)
                    break;
                  case 2:
                    this.pjqisShow = '2';
                     this.pjq.push({'name':this.form.pjq.name,"type":type,"uniqueldentifier":id})
                    break;
                  case 3:
                    this.qhjisShow = '2';
                    break;
                  case 4:
                    this.dpisShow = '2';
                    break;
                  case 5:
                    this.ledisShow = '2';
                    this.led.push({'name':this.form.led.name,"type":type,"uniqueldentifier":id})
                    break;
                }
            }
           
          });

      
    },
    deviceChoose(i){
      console.log( this.hjq,"重新选择")
        switch (i) {  
          case 1:
            this.hjqisShow = '3';
            this.hjq = this.hjq;
            break;
          case 2:
            this.pjqisShow = '3';
            break;
          case 3:
            this.qhjisShow = '3';
            break;
          case 4:
            this.dpisShow = '3';
            break;
          case 5:
            this.ledisShow = '3';
            break;
        }
    },

    btns() {
      this.dcs = false;
    }
  } // 函数
};
</script>
<style lang='scss'>
.windowss_edit {
    box-sizing: border-box;
    .main{
      background: #fff;
      width: 100%;
      margin-top: 3%;
      padding: 5% 20%;
      .textArea{
        textarea{
          min-height: 240px!important;
        }

      }
      .el-form-item__label{
        font-weight: bold;
      }
      .btn{
        width: 120px;
        height:32px;
        line-height: 1px;
        margin-left: 80px;
      }
    }
    .equipment{
      margin-bottom: 10px;
    }
  }
</style>
